<template>
	<view class="submit-list">
		<uni-nav-bar title="提交列表" leftIcon="back" @clickLeft="onClickLeft">
			<view class="nav-right" slot="right">
				<view class="right-btn" @click="onSignup">
					<text>完成</text>
				</view>
			</view>
		</uni-nav-bar>
		<view class="head">
			<image class="head_icon" src="/static/pages/tips.png" mode="widthFix"></image>
			<text class="head_txt">点击通过表示确定找该好友.可选择多名好友，点击完成后.其它用户提交申请失效.活动结束。</text>
		</view>
		
		<view class="list">
			<view class="item">
				<view class="item_left">
					<image class="item_img" src="" mode=""></image>
					<view class="item_content">
						<view class="item_head">
							<text class="head_name">小时光</text>
							<image class="sex-icon" :src="sex == 1? '/static/pages/sex1.png' : '/static/pages/sex2.png'" mode=""></image>
						</view>
						<text class="head_time">12-5 10:16</text>
					</view>
				</view>
				<view class="item_right" @click="onThrough">
					<text>通过</text>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="loading" />
	</view>
</template>

<script>
	import uLoadmore from '@/components/u-loadmore/u-loadmore.vue'
	export default{
		components:{
			uLoadmore
		},
		data(){
			return{
				sex:1,
				id:null,
				page:1,
				list:[],
				loading:'loadmore'
			}
		},
		onLoad(option) {
			this.id = option.id
			this.onReset()
			this.getList()
		},
		onReachBottom() {
			if(this.loading == 'nomore') return
			this.getList()
		},
		methods:{
			onThrough(id){
				uni.showLoading()
				this.$utils.postrequest("/api/activit_signup/signup_pass", {id}, (res)=> {
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title:"操作成功"
						})
						this.onReset()
						this.getList()
					}
				})		
			},
			onSignup(){
				uni.showLoading()
				this.$utils.postrequest("/api/activit_signup/signup_end", {activit_id: this.id}, (res)=> {
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title:"操作成功"
						})
						uni.navigateBack()
					}
				})		
			},
			onReset(){
				this.loading = 'loadmore'
				this.page = 1
				this.list = []
			},
			getList(){
				this.loading = "loading"
				let params = {
					activit_id: this.id,
					page: this.page,
				}
				this.$utils.postrequest("/api/activit_signup/getsignup", params, (res)=> {
					if (res.code == 200) {
						this.list = this.list.concat(res.data)
						this.loading = res.data.length < 5 ? "nomore" : "loadmore"
						this.page++
					}
				})	
			},
			onClickLeft(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-left{
		display: flex;
		align-items: center;
		
		.back-img{
			width: 48upx;
		}
		
	}

	.nav-right{
		.right-btn{
			width: 123upx;
			height: 66upx;
			background: linear-gradient(-51deg, #0C97F8, #3FCAFE);
			opacity: 0.79;
			border-radius: 33upx;
			text-align: center;
			line-height: 66upx;
			font-size: 28upx;
			color: #FFFFFF;
		}
	}
	
	.head{
		width: 100%;
		padding: 36upx 27upx 28upx 32upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #FFFBEE;
		
		.head_icon{
			width: 31upx;
			height: 31upx;
			margin-right: 14upx;
		}
		
		.head_txt{
			font-size: 26upx;
			color: #FF9307;
		}
	}
	
	.list{
		padding-left: 28upx;
		box-sizing: border-box;
		margin-bottom: 70upx;
		
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:33upx 30upx 27upx 0;
			box-sizing: border-box;
			border-bottom: 1px solid #ECE9E9;
			
			.item_left{
				display: flex;
				align-items: center;
				
				.item_img{
					width: 104upx;
					height: 105upx;
					border-radius: 50%;
					margin-right: 15upx;
				}
				
				.item_content{
				
					.head_name{
						font-size: 27upx;
						font-weight: bold;
						color: #2B2937;
					}
					
					.sex-icon{
						width: 22upx;
						height: 21upx;
						margin-left: 13upx;
					}
					
					.head_time{
						font-size: 24upx;
						color: #AAAAAA;
					}
				}
			}
			
			.item_right{
				width: 123upx;
				height: 66upx;
				line-height: 66upx;
				background: rgba(205,235,251,0.79);
				border-radius: 33upx;
				text-align: center;
				font-size: 28upx;
				font-weight: 800;
				color: #23B5FF;
			}
		}
	}

</style>
